UUebView チートシート
概要
・なんぞや
・サンプルについて
・簡単な使い方
・独自タグの作り方
・UUebViewからTMProを使うには
などを書く。
なんぞや
これ。
UUebView
https://github.com/sassembla/UUebView-freeversion
htmlコンテンツをuGUI上で描画できるWebView。
独自タグをuGUIで作ることができ、スクリプトやアニメーションのアタッチなども可。
が、断っておくと、そのへんのWebサイトで表示されているようなコンテンツはほぼ100%表示されない。なぜならこいつは、
Unity上で作ったいろいろなレイアウト情報やらスタイル情報やらオリジナルタグを、HTMLで記述して表示する、というものだから。
何がいいたいかというと、CSSとかJSをガン無視したパーサやレイアウターが書かれているうえ、
受け付けるHTMLファイル上のDOCTYPE指定はuuebviewという、完全独自のものなので。
サンプルについて
masterブランチは通常のuGUIを使ったビューの表示、
TMProEnabledブランチはTextMesh Proのテキストを使ったビューの表示を行うサンプルが入っている。
TMPro使ってみてほしいからTMProEnabledブランチで試すのがオススメ。
uGUI Text版
masterブランチをダウンロード -> Assets/Sample/SampleSceneを開く -> Play
これで、uGUI Textを使ったコンテンツの表示が行われる。表示されるコンテンツは Assets/Sample/Resources/items.html 。
こんなのが出る。
uGUIでこんな感じのレイアウトベースみたいなものを作り、
これらをHTMLタグに変換し、htmlから参照、レイアウト、変形させて使っている。
背景はimageの9パッチで伸縮している。これももちろんHTMLタグ。
TMPro Text版
TMProEnabledブランチをダウンロード -> Assets/Sample/SampleScene2_TMProPluginを開く ->
TextMesh ProをAssetStoreから落としてくる -> Play
これで、TextMesh Pro Textを使ったコンテンツの表示が行われる。表示されるコンテンツは Assets/Sample/Resources/tmpro.html 。
こんなのがでる。
ちょっとだけシュッとしてるのがお分かりいただけるだろうか。
ズームして見るとuGUIとの違いがわかりやすい。
テキストレイアウトの情報にもTMProのものを使っているので、字句の分割具合がuGUIと若干異なる。
あと左向き矢印とか出てない文字もあるんだが、これはフォントを作る時の範囲設定の問題。
簡単な使い方
0.unitypackage(https://github.com/sassembla/UUebView-freeversion/blob/TMProEnabled/UUebView.unitypackage)を対象プロジェクトに使う
1.表示領域となるRectTransformを持ったオブジェクトを用意。 例：uGUIのimageとか。不要なら画像消しちゃってOK。
2.そのオブジェクトにUUebViewComponent をセット。
3.適当なGameObjectを一つHierarchy上に作って、スクリプトを追加 + スクリプトにIUUebViewEventHandlerを実装する。
スクリプトはこんな感じ。https://github.com/sassembla/UUebView-freeversion/blob/TMProEnabled/Assets/Sample/SampleHandler3.cs
ずばり空のハンドラだけ。
4.UUebViewComponentのPreset Urlに、表示したいリソースのパスを、https:// とか、特殊なスキーマ resources:// で指定する。
5.UUebViewComponentのPreset Event Handlerに、3で作ったオブジェクトを指定する。
で、これをとりあえずサンプルリポジトリで実現したシーンを、SampleScene3として上げておいた。
インスペクター、実行時の見た目はこんな感じ。
、、、なんかロード完了時に親オブジェクト=baseの位置が動いちゃうのはバグだと思う。
独自タグの作り方
1.HierarchyのCanvas上に、cssファイルの名前をつけるような感じでRectTransformを持つ要素をセット。
2.この画像だとMyInfoViewって名前のRectTransformを持ったGameObjectを作成。
ここで、MyInfoViewの子要素はすべてタグに変換される。
この絵だと、bgとかtitleBoxとかtextBgとか、titleTextとかがすべてHTMLタグに変形される。
許容されている要素は、Text、ImageなどのGUI要素と、それ以外のスクリプトなど。
3. bg/titleBoxなど、1階層以上ある構造部分は、「レイアウトのための情報」としての側面も持つ。
これらの要素は、自由にレイアウト制約をつけたり、背景画像を持ったり、テキスト情報を持ったりして良い。
レイアウトについて、
例えば<なんかタグ><titleBox>なにか要素</titleBox></なんかタグ>みたいに書くと、
なにか要素の部分のレイアウトは、titleBoxゲームオブジェクトが持っているuGUIのレイアウト特性を発揮する。
左からNドットとか、上下中央ぞろえとか、そういう特性を発揮する。
4.MyInfoView直下で階層を持たない要素は、レイアウトのための情報を一切保持しない。
画像コンテンツを置いた場合はその画角を維持したタグとして生成される。
これらの要素は、アンカー左上 + オフセットを左上とかにしておくと、動作時、ふつうのWebのレイアウトに近い感触になる。
階層ありのオブジェクトでレイアウトを指定し、階層なしのオブジェクトでコンテンツのスタイルを決定しレイアウトに打ち込む、
というのが基本スタイルになっている。
5.タグに変換する
というわけで、ここまでで作ったuGUIによるタグ集 MyInfoViewを選択した状態で、
Unity > Window > UUebView > Generate UUeb Tags From Selection
を押すと、選択していたオブジェクトはいい感じにHTMLのタグに変換される。
6.作ったタグを使ってみる
実際にMyInfoViewを使っているのがこのHTMLコード。
<!DOCTYPE uuebview href='resources://Views/MyInfoView/UUebTags'>
<body>
<bg>
<titlebox>
<titletext>Sample</titletext>
</titlebox>
<newbadge/>
<textbg>
<textbox>
<updatetext>lorem ipsum like sample. <br>← br here.<mya href='somewhere'>link here</mya> a long text will make large window. like this.<br> do you like hedgehog?</updatetext>
<img src='https://pbs.twimg.com/profile_images/378800000220029324/fe66faeca20115da8566e51d83447ead_400x400.jpeg' button='true'/>
<updatetext hidden='true' listen='readmore'>押したね! なんか出たね。<br>押されたらボタンの画像が動く、とかはUnityのアニメーションで簡単にできる。<br>今回はボタンを自由落下させる。</updatetext>
</textbox>
<showbuttonbg>
<showbutton button='true' id='readmore'/>
</showbuttonbg>
</textbg>
</bg>
<bg>
<titlebox>
<titletext>日本語とか</titletext>
</titlebox>
<newbadge/>
<textbg>
<textbox2>
<updatetext>日本語とかももちろん普通に入る。まだuGUIのデフォそのままなので、高さの問題とか改行がデリカシーないとかそのへんはあるんだけどね。たぶん。</updatetext>
</textbox2>
</textbg>
</bg>
<bg>
<titlebox>
<titletext>htmlから出してる</titletext>
</titlebox>
<textbg>
<textbox3>
<updatetext>このテキストやレイアウトの全てはSample/Resources/items.htmlっていうファイルから出している。もちろんhttpsとかで採ってくるのもできる。</updatetext>
</textbox3>
<iconbg>
<img src='https://pbs.twimg.com/profile_images/378800000220029324/fe66faeca20115da8566e51d83447ead_400x400.jpeg' button='true'/>
</iconbg>
</textbg>
</bg>
<bg>
<titlebox>
<titletext>ボタン？</titletext>
</titlebox>
<textbg>
<textbox2>
<updatetext>ある程度のwebサイト的な挙動を、htmlタグによる関連付けで動作するようにしてみた。簡単だけど動く。</updatetext>
</textbox2>
</textbg>
</bg>
<bg>
<titlebox>
<titletext>もっと高度なこと</titletext>
</titlebox>
<textbg>
<textbox2>
<updatetext>スターウォーズ好き？ uGUIだから、ビューを回転させたりした状態でももちろんインタラクションするよ。</updatetext>
</textbox2>
</textbg>
</bg>
</body>
HTMLなので可変長になるし、HTMLなのでタグで記述になるし、みたいな。
気になる内容は、、、？
<!DOCTYPE uuebview href='resources://Views/MyInfoView/UUebTags'>
1行目のDOCTYPEで、もはやHTMLではなくUUebViewだぜ、っていうのを高らかに宣言している。
で、このHTMLファイルで使っているタグデータはこれだぜ、みたいなのをリンクで書いている。
この書き方で、resourcesからMyInfoViewのデータを取り出し、以降使えるようにしている。
bgタグとかそういう元来HTMLに存在してなさそうなタグが跋扈してて平気なのはそのせい。
ちなみにaタグとかpタグとか、さすがにこれはデフォルトで合った方がいいよね？みたいな要素は、
デフォルトが用意されていて暗黙的に使えるようになっている。また、それらの設定も変更できる。
resources://みたいなプロトコルを勝手に定義しているが、これを、例えば外部からデータを持ってくるプロトコルに変えるとどうなるか、、？
ビューに表示するすべてのレイアウト要素、スタイル要素を更新することができる。
ちなみにAssetBundleをDLしてきてロードするみたいなの途中まで作っててまだ完成してない。
imgタグなどの画像タグ(imageコンポーネントを持った状態でGenerateされたタグ)は、hrefでresources://とかhttps://とか書いて
好きなところからデータを取得することができる。
UUebViewからTMProを使うには
SampleScene2ではすでに条件が整えられた状態になっているので、新規プロジェクトにunitypackageとかで放り込む場合には解説が必要。
手順はまだちょっと複雑で、
1.TMProを入れる
2.UUebView/UUebViewPlugins/フォルダ内のTMProPlugin.cs.gzをその場に解凍する
3.UUebViewのインスタンス作成時、次のようなコードを書く。
uuebView = UUebViewComponent.GenerateSingleViewFromUrl(this.gameObject, "resources://tmpro.html", scrollViewSize, null, null, null, null, new TMProPlugin());
以上。
ものすごくかっこ悪い状態なんだけど、末尾のnew TMProPlugin()で、TMPro対応のプラグインを入れてる。
そのうちもうちょっとカッコよくなる。多分。
ひとまずこんな感じ。WebGLビルドでブラウザで見ても字が綺麗。これはモチベーション上がるわ。